<template>
	<div class="user_header" :style="{backgroundImage: `url(${background_image})`}">
		<van-icon name="set" class="user_set" @click="toSetting" />
		<div class="user_avatar" @click="showQrCode">
			<img :src="avatar" @click="toLogin" alt="头像" width="55" height="55">
		</div>
		<div>
			<img v-if="this.user.isVip" src="@/assets/images/vip.png" width="24px" height="24px" alt="vip">
			<span class="name_panel">{{nick_name}}【{{user.id}}】</span>
			<!-- <div v-if="!this.user.isVip" class="buy_vip_text" @click="showVip=true"><u>升级成为VIP</u></div>
			<div v-else class="buy_vip_text" @click="$emit('onClickShareVip')"><u>推荐VIP赚佣金</u></div> -->
		</div>
		<buy-vip :visible="showVip" @visibleChange="showVip=$event"/>
	</div>
</template>

<script>
	import { USER_PROFILE,APP_QRCODE } from '@/api/user';
	import avatar_default from "../../assets/images/avatar_default.png";
	import bg_default from "../../assets/images/user_head_bg.png";
	import { QR_CREATE } from '@/api/global';
	import BuyVip from '@/views/user/module-vip/buy-vip';
	import wx from 'weixin-js-sdk';
	import wxConfig from '@/vue/mixin/wx-config';
	export default {
		name: "user-header",
		mixins: [wxConfig],
		props: {
			isLogin: {
				type: Boolean,
				default: true
			}
		},

		data(){
			return {
				nick_name: "昵称",
				avatar: avatar_default,
				background_image: bg_default,
				showVip: false,
			}
		},

		activated(){
			this.getUserInfo();
		},

		methods: {
		  getUserInfo() {
		    const user = this.getUser();
		    this.nick_name = user.realname || user.nickname || '昵称';
		    this.avatar = user.avatar || avatar_default;
		    this.background_image = user.background_image || bg_default;
		  },
		  toSetting() {
		    this.$router.push({
		      name: "user-information"
		    })
		  },
		  toLogin() {
		    !this.isLogin && this.$router.push({
		      name: 'login',
		      query: {
		        redirect: "user"
		      }
		    })
		  },
		  showQrCode() {
		    if (this.user.isteam !== 3) {
		      return;
		    }
				//如果是小程序的环境就生成小程序码
					this.isWxApp().then(result=>{
						if (result) {
								//调用小程序的接口获取二维码
								this.$reqGet(APP_QRCODE,{centerId:this.user.centreId,teamId:this.user.id}).then(res=>{
									let imgUrl = res.data.url;
										//请求生成小程序店铺的接口，展示二维码
										wx.ready(function () {
										wx.previewImage({
											current: imgUrl, // 当前显示图片的http链接
											urls: [imgUrl] // 需要预览的图片http链接列表
										});
									});
								})
							
						} else {
							console.log(this.user.id)
							const url = this.getUri() + 'register/invite?teamId=' + this.user.id + '&cid=' + this.user.centreId + '&redirect=%2Fhome';
							const qrImage = this.$deployApi + QR_CREATE + "?c=" + encodeURIComponent(url);
							wx.ready(function () {
								wx.previewImage({
									current: qrImage, // 当前显示图片的http链接
									urls: [qrImage] // 需要预览的图片http链接列表
								});
							});
						}
					})
				 
		  }
		},

		components: {
			[BuyVip.name]: BuyVip
		}
	}

</script>

<style lang="scss" scoped>
	.user_header {
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		height: 130px;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		padding-top: 30px;
	}

	i.user_set {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
	}
	i.code {
		font-size: 10px;
		vertical-align: middle;
	}
	.store_code {
		position: absolute;
		right: 0;
		bottom: 10px;
		font-size: 10px;
		color: #fff;
		background-color: rgba(153,153, 153, .4);
		padding: 5px 4px 5px 8px;
		border-radius:20px 0 0 20px;
	}
	.user_avatar{
		margin-bottom: 10px;
		img{
			border: 0;
			border-radius: 50%;
		}
	}

	.vip_text {
		margin-left: 3px;
		color: gold;
	}

	.buy_vip_text {
		position: absolute;
		right: 15px;
		bottom: 8px;
		font-size: 12px;
	}
	.name_panel {
		position: relative;
		bottom: 5px;
	}
</style>
